<template>
  <div class="search-button-area">
    <a-button type="submit" @click="operate('search')" class="search-button">
      <img src="@/assets/images/buttonIcon/search.png" />
    </a-button>
    <a-button type="submit" @click="operate('reset')" class="reset-button">
      <img src="@/assets/images/buttonIcon/reset.png" />
    </a-button>
  </div>
</template>
<script lang="ts" setup>
const emit = defineEmits(['search', 'reset', 'refresh'])
const operate = (str: any) => {
  emit(str)
}
</script>
<style lang="less" scoped>
.search-button-area {
  display: flex;
  align-items: center;

  .search-button {
    padding: 0 0.875rem;
    margin-right: 0.75rem;
    width: 2.875rem;
    min-width: 2.875rem;
    height: 2rem;
    min-height: 2rem;
    border-radius: 0.125rem;
  }

  .reset-button,
  .refresh-button {
    padding: 0 0.4375rem;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    border-radius: 0.125rem;
  }

  // .reset-button {
  //   margin-right: 1.25rem;
  // }

  img {
    width: 1.125rem;
    height: 1.125rem;
  }
}
</style>
